<template>
	<div class="add-api">
		<el-dialog v-model="dialogVisible" :title="dialogTitle" width="500">
			<div class="add-api">
				<el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" label-width="auto" class="demo-ruleForm"
					:size="formSize" status-icon>
					<el-form-item label="债券信息" prop="region">
						<el-input v-model="ruleForm.region" placeholder="请输入..." clearable />
					</el-form-item>
					<el-form-item label="债券过程" prop="region">
						<el-select v-model="ruleForm.region" placeholder="请选择...">
							<el-option label="Zone one" value="shanghai" />
						</el-select>
					</el-form-item>
					<el-form-item label="债券规模" prop="region">
						<el-select v-model="ruleForm.region" placeholder="请选择...">
							<el-option label="Zone one" value="shanghai" />
						</el-select>
					</el-form-item>
				</el-form>
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="dialogVisible = false">取消</el-button>
					<el-button type="primary" @click="submitForm(ruleFormRef)">
						确认
					</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import type { ElMessageBox, ComponentSize, FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { DebtInfoAdd, DebtInfoEdit } from '@/api/ai'

interface RuleForm {
	name: string
	region: string
	count: string
	date1: string
	date2: string
	delivery: boolean
	location: string
	type: string[]
	resource: string
	desc: string
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<any>({
	name: '',
	region: '',
})

const rules = reactive<FormRules<RuleForm>>({
	name: [
		{ required: true, message: '内容不能为空', trigger: 'blur' },
	],
	region: [
		{
			required: true,
			message: '内容不能为空',
			trigger: 'change',
		},
	],
})
const dialogVisible = ref(false)
const dialogTitle = ref('')

const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {
			let params = {
				sysReqHead: {
					version: "",
					traceId: "",
					transSeq: "",
					serviceFramework: "",
					branchTxNo: "",
					nodeId: "",
					txType: "",
					method: ""
				},
				expandMap: {},
				reqHeader: {
					id: ""
				},
				reqBody: {
					debtInfo: {
						id: "",
						createBy: "",
						createTime: "",
						updateBy: "",
						updateTime: "",
						sysOrgCode: "",
						bondFullName: "",
						debtProcess: "",
						debtAmount: 0,
						bookManagerName: "",
						leadManager: "",
						regNoticeNumber: "",
						subBeginDate: "",
						debtRole: "",
						debtCode: "",
						debtName: "",
						bondType: "",
						subEndDate: "",
						consignPayEndDate: "",
						offeredType: 0
					},
					pageNo: 0,
					pageSize: 0
				}
			}
			if (dialogTitle.value === '新增') {
				DebtInfoAdd(params).then(res => {
					console.log('%c Line:358 🍔 res', 'color:#e41a6a', res);
					ElMessage({
						message: '新增成功',
						type: 'success',
					})
				})
			} else if (dialogTitle.value === '编辑') {
				DebtInfoEdit(params).then(res => {
					console.log("%c Line:132 🍤 res", "color:#f5ce50", res);
					ElMessage({
						message: '编辑成功',
						type: 'success',
					})
				})
			}

		} else {
			console.log('error submit!', fields)
		}
	})
}

const onSubmit = () => {
	console.log('submit!')
}

const showDialog = (val: any) => {
	dialogVisible.value = val
}

const setTitle = (val: any) => {
	dialogTitle.value = val
}

defineExpose({
	showDialog,
	setTitle,
})
</script>

<style lang="scss" scoped></style>
